<template>
  <div>
      
      <div class="box">
          <p>1</p>
          <p>2</p>
          <p>3</p>
          
      </div>
      <!-- 
          当我们给元素设置为弹性盒子之后，里面的子元素会默认沿着主轴排列。
       -->
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.box{
    width: 300px;
    height: 200px;
    border: 2px solid red;
    display: flex;
    flex-wrap: wrap;  /**超出换行 */

    /* 从左往右 */
    /* justify-content: flex-start;  */ 

    /* 靠右对齐 */
    /* justify-content: flex-end; */

    /* 居中对齐 */
    /* justify-content: center; */

    /* 两端对齐 */
    /* justify-content: space-between; */

    /* 1:2:2:1 */
    /* justify-content: space-around; */

    /* 1:1:1 */
    /* justify-content: space-evenly; */
}
p{
    width: 40px;
    border: 2px solid blue;
    height: 40px;
}
</style>